"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { motion } from "framer-motion";

interface TetrisScoreProps {
  score: number;
  level: number;
  lines: number;
}

const TetrisScore = ({ score, level, lines }: TetrisScoreProps) => {
  return (
    <Card className="bg-card/60 backdrop-blur-md border-primary/30 shadow-md shadow-purple-500/20">
      <CardHeader className="pb-2">
        <CardTitle className="text-sm font-medium bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">游戏统计</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-3 gap-3">
          <ScoreItem title="分数" value={score} />
          <ScoreItem title="等级" value={level} />
          <ScoreItem title="行数" value={lines} />
        </div>
      </CardContent>
    </Card>
  );
};

interface ScoreItemProps {
  title: string;
  value: number;
}

// 根据不同的统计项目返回不同的渐变色
const getGradient = (title: string) => {
  switch (title) {
    case "分数":
      return "from-blue-400 to-cyan-300";
    case "等级":
      return "from-purple-400 to-pink-300";
    case "行数":
      return "from-green-400 to-emerald-300";
    default:
      return "from-blue-400 to-purple-300";
  }
};

const ScoreItem = ({ title, value }: ScoreItemProps) => {
  const gradient = getGradient(title);
  
  return (
    <motion.div 
      className="flex flex-col items-center justify-center bg-gradient-to-br from-indigo-900/40 to-purple-900/40 p-3 rounded-lg shadow-inner"
      initial={{ scale: 0.9, opacity: 0 }}
      animate={{ scale: 1, opacity: 1 }}
      transition={{ duration: 0.2 }}
      whileHover={{ scale: 1.05 }}
    >
      <span className="text-xs text-white/70">{title}</span>
      <motion.span 
        className={`font-bold text-xl bg-gradient-to-r ${gradient} bg-clip-text text-transparent`}
        key={value}
        initial={{ scale: 1.2 }}
        animate={{ scale: 1 }}
        transition={{ duration: 0.2 }}
      >
        {value}
      </motion.span>
    </motion.div>
  );
};

export default TetrisScore;